import React, { Component } from 'react'
import { NavBar, SearchBar } from 'antd-mobile';
import GoBack from '../../components/GoBack';
import './Cate.less'
import { reqCate, reqCateGoods } from '../../http/api';
export default class Cate extends Component {
    constructor() {
        super()
        // 初始化数据
        this.state = {
            leftlist: [],
            n: 0,
            goodslist: []
        }
    }

    componentDidMount() {
        // 发请求
        reqCate().then(res => {
            if (res.data.code === 200) {
                // 赋值
                this.setState({
                    leftlist: res.data.list,
                })
            }
        })
        this.changeN(0,1)
    }
    changeN(index, id) {
        this.setState({
            n: index

        })   
        // 发请求
        reqCateGoods({
            fid: id
        }).then(res => {
            this.setState({
                goodslist: res.data.list ? res.data.list : []
            })
        })


    }

    render() {
        let { leftlist, n, goodslist } = this.state
        return (
            <div className="cate">
                <NavBar
                    mode="dark"
                    icon={<GoBack></GoBack>}
                >分类</NavBar>
                <div className="nav_search">
                    <SearchBar placeholder="搜索" maxLength={8} />
                </div>
                <div className="main">
                    <div className="left">
                        {
                            leftlist.map((item, index) => (
                                <h5 key={item.id} className={index === n ? 'select' : ''} onClick={() => this.changeN(index, item.id)}>{item.catename}</h5>
                            ))
                        }

                    </div>
                    <div className="right">
                        <h3>热门精选</h3>
                        <ul>
                            {
                                goodslist.map(item => {
                                    return (
                                        <li key={item.id} onClick={() => this.props.history.push('/detail/' + item.id)}>
                                            <div className="list_left">
                                                <img src={item.img} alt="" />
                                            </div>
                                            <div className="list_right">
                                                <p>{item.description}</p>
                                                <p>{item.goodsname}</p>
                                                <p>￥{item.price}</p>
                                                <del>￥{item.market_price}</del>
                                                <p>限购：{item.islimit}份</p>
                                            </div>

                                        </li>
                                    )
                                })
                            }

                        </ul>
                    </div>

                </div>
            </div>
        )
    }
}
